<template>
  <div class="home">
    <div class="header">
      <div class="header-content">
        <h1>修修大王</h1>
        <p>快速维修，专业服务</p>
      </div>

      <div class="searchbar">
        <p>城阳区</p>
        <input type="text" placeholder="电视维修" />
        <button>搜索</button>
      </div>
    </div>

    <div class="banner">
      <h1>您需要什么服务？</h1>
      <div class="banner-items">
        <div class="item1">
          <p>安装</p>
        </div>
        <div class="item2">
          <p>维修</p>
        </div>
        <div class="item3">
          <p>清洗</p>
        </div>
      </div>
    </div>

    <div class="work-item">
      <div class="w1" @click="handleClickW1">
        <div class="p1"></div>
        维修
      </div>
      <div class="w2">
        <div class="p2"></div>
        安装
      </div>
      <div class="w3">
        <div class="p3"></div>
        清洗
      </div>
      <div class="w4">
        <div class="p4"></div>
        搬运
      </div>
    </div>

    <div class="content">
    </div>

    <div class="foot">
      <div class="w1">新人福利</div>
      <div class="w2">在线客服</div>
      <div class="w3">关于我们</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const showCreateOrder = ref(false);

const handleClickW1 = () => {
  console.log('点击了 w1');
  router.push('/home/createorder');
};

</script>

<style scoped>

.home {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  font-family: Arial, sans-serif;
}
.header {
  background-image: linear-gradient(to bottom, #DDFFF8, #ffffff); /* 从上到下的绿色到白色渐变 */
  padding: 20px;
  text-align: center;
  color: #333; /* 文本颜色，根据需要调整 */
}

.header-content h1 {
  margin: 0;
  font-size: smaller;
  text-align: left;
}
.header-content p {
  margin: 0;
  font-size: smaller;
  text-align: left;
  color: #7F928E; /* 或具体的灰色值，如 #888 */
  padding: 5px 0; /* 上下各5px间距，左右不变 */
}

.searchbar {
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: space-around;
  margin-top: 20px;
  border: 1px solid green; /* 添加绿色边框 */
  border-radius: 50px; /* 设置圆角 */
  background-color: #F7FFFD;
}


.searchbar p {
  display: flex;
  font-weight: bold;
  margin-left: 20px;
  align-items: center; /* 垂直居中 */
}

.searchbar input {
  flex: 1;/* 使元素占满可用空间 */
  margin: 5px; /* 外边距 */
  height: 70%;
  border: none; /* 取消边框 */
  background-color: transparent; /* 设置背景为透明 */
}


.searchbar button {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 10px;/* 外边距 */
  height: 80%;
  background-color: #00C87C;
  color: white;/*文字颜色 */
  border: none;/*移除按钮的边框 */
  border-radius: 30px;/*圆角 */
  cursor: pointer;
}

.banner {
  padding: 40px 0;/* 设置元素的内边距 */
  text-align: center;/* 设置元素内的文本居中对齐*/
}
.banner h1 {
  font-size: 24px;
  color: #333; /* 标题颜色 */
  margin-bottom: 20px;
}

.banner-items {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.banner p {
  display: flex;
  justify-content: space-around;
  margin-top: 150px;
}

.banner-items .item1,
.banner-items .item2,
.banner-items .item3 {
  width: 25%; /* 每个元素的宽度 */
  height: 150px; /* 假设这是你想要的高度，根据实际情况调整 */
  display: inline-block; /* 使元素横向排列 */
  background-position: center; /* 背景图片居中显示 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  border-radius: 10px; /* 设置圆角大小，按需调整 */
  background-clip: padding-box; /*确保边框不会裁剪背景图片 */
}

.banner-items .item1 {
  background-color: #FFAE8A;
  background-image: url("/src/assets/安装.jpg");
}

.banner-items .item2 {
  background-color: #9BD8FF;
  background-image: url("/src/assets/维修.jpg");
}

.banner-items .item3 {
  background-color: #5FEEC9;
  background-image: url("/src/assets/清洗.jpg");
}

.work-item {
  margin-top: 20px;
  display: flex; /* 使用Flexbox布局 */
  width: 100%;
}

.work-item .w1,
.work-item .w2,
.work-item .w3,
.work-item .w4 {
  width: 25%;
  margin:20px;
  background-color: #eeeeee;
  height: 150px; /* 假设这是你想要的高度，根据实际情况调整 */
  display: inline-block; /* 使元素横向排列 */
  background-position: center; /* 背景图片居中显示 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  border-radius: 10px; /* 设置圆角大小，按需调整 */
  background-clip: padding-box; /*确保边框不会裁剪背景图片 */
  text-align: center;/*文字居中 */
}

.work-item p {
  margin-top: 20px;
  font-weight: bold;
}
.work-item .p1,
.work-item .p2,
.work-item .p3,
.work-item .p4 {
  height: 50%;
  background-position: center; /* 背景图片居中显示 */
  background-size: contain ;
  background-repeat: no-repeat;
}
.work-item .p1{
  background-image: url("/src/assets/维修图标.png");
}
.work-item .p2{
  background-image: url("/src/assets/装修图标.png");
}
.work-item .p3{
  background-image: url("/src/assets/清洗图标.png");
}
.work-item .p4{
  background-image: url("/src/assets/搬运图标.png");
}

.content {
  flex: 1; /* 让内容区域占据剩余的空间 */
}

.foot {
  background-color: #FF9369; /* 页脚背景颜色 */
  color: white; /* 文字颜色 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-around; /* 子元素平均分布在容器中 */
  padding: 20px 0; /* 上下内边距 */
  font-size: 16px; /* 字体大小 */
  border-radius: 10px; /* 圆角 */
}

.foot div {
  flex: 1; /* 每个子元素占1份 */
  text-align: center; /* 文本居中对齐 */
  padding: 10px; /* 内边距 */
  border-left: 1px solid #5C5553; /* 左侧边框，提供分隔 */
  box-sizing: border-box; /* 边框计算在宽度内 */
}

.foot div:first-child {
  border-left: none; /* 去除第一个元素的左侧边框 */
}

.foot a {
  color: inherit; /* 链接颜色继承自父元素 */
  text-decoration: none; /* 去除下划线 */
  display: block; /* 链接显示为块级元素 */
}


</style>
